<template>
  <view class="announcement-detail-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <FaIcon name="arrow-left" color="#1f2937" :size="36" />
        </view>
        <text class="header-title">公告详情</text>
        <view class="share-btn" @click="handleShare">
          <FaIcon name="share" color="#1f2937" :size="36" />
        </view>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 公告头部 -->
      <view class="announcement-header">
        <view class="header-card">
          <view class="title-section">
            <view :class="['icon-wrap', `icon-${announcement.type}`]">
              <FaIcon :name="getTypeIcon(announcement.type)" color="#ffffff" :size="64" />
            </view>
            <view class="title-content">
              <text class="announcement-title">{{ announcement.title }}</text>
              <view :class="['type-badge', `badge-${announcement.type}`]">
                <text class="badge-text">{{ getTypeName(announcement.type) }}</text>
              </view>
            </view>
          </view>
          
          <view class="meta-section">
            <view class="meta-left">
              <text class="meta-item">
                <FaIcon name="calendar" color="#9ca3af" :size="24" />
                {{ announcement.time }}
              </text>
              <text class="meta-item">
                <FaIcon name="eye" color="#9ca3af" :size="24" />
                {{ announcement.views }} 阅读
              </text>
            </view>
            <button class="collect-btn" @click="handleCollect">
              <FaIcon name="star-o" color="#6b7280" :size="24" />
              <text class="collect-text">收藏</text>
            </button>
          </view>
        </view>
      </view>

      <!-- 公告内容 -->
      <view class="announcement-content">
        <view class="content-card">
          <view class="content-title">
            <view class="title-bar"></view>
            <text class="title-text">公告内容</text>
          </view>
          <view class="content-body">
            <rich-text :nodes="announcement.content" class="content-text"></rich-text>
          </view>
        </view>
      </view>

      <!-- 相关公告 -->
      <view class="related-section">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">相关公告</text>
        </view>
        
        <view class="related-list">
          <view 
            v-for="item in relatedAnnouncements" 
            :key="item.id"
            class="related-item"
            @click="handleViewRelated(item)"
          >
            <text class="item-title">{{ item.title }}</text>
            <view class="item-footer">
              <text class="item-time">{{ item.time }}</text>
              <FaIcon name="arrow-right" color="#9ca3af" :size="24" />
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import FaIcon from '@/components/common/FaIcon.vue'

const announcementId = ref('')

// 公告数据
const announcement = ref({
  id: 1,
  type: 'policy',
  title: '2024年农业补贴政策发布',
  content: `
    <p style="margin-bottom: 16px; color: #6b7280; line-height: 1.8;">尊敬的各位农业从业者：</p>
    <p style="margin-bottom: 16px; color: #6b7280; line-height: 1.8;">根据国家农业农村部最新通知，2024年农业补贴政策已正式发布。本次政策涵盖了种植补贴、农机购置补贴、绿色农业发展补贴等多个方面，旨在进一步支持农业现代化发展。</p>
    <p style="margin-bottom: 16px; color: #1f2937; font-weight: bold;">主要补贴内容：</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">1. <strong>种植补贴：</strong>根据种植面积和作物类型，每亩补贴200-500元不等；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">2. <strong>农机购置补贴：</strong>购买符合条件的农业机械设备，可获得30%-50%的补贴；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">3. <strong>绿色农业补贴：</strong>采用绿色种植技术的，额外补贴最高5000元；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">4. <strong>科技创新补贴：</strong>引进新技术、新品种的农户，可申请最高10000元的补贴。</p>
    <p style="margin-top: 16px; margin-bottom: 16px; color: #1f2937; font-weight: bold;">申请条件：</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 具有合法的土地经营权或使用权；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 从事农业生产经营满一年以上；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 无违法违规记录；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">• 按要求提交相关证明材料。</p>
    <p style="margin-top: 16px; margin-bottom: 16px; color: #1f2937; font-weight: bold;">申请流程：</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">1. 登录平台填写申请表；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">2. 上传相关证明材料；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">3. 等待审核（5-7个工作日）；</p>
    <p style="margin-bottom: 8px; color: #6b7280; line-height: 1.6;">4. 审核通过后，补贴款项将直接打入预留账户。</p>
    <p style="margin-top: 16px; color: #6b7280; line-height: 1.8;">详情请咨询当地农业农村部门或拨打服务热线：400-123-4567。</p>
  `,
  time: '2024-10-20 14:30',
  views: '1.2k'
})

// 相关公告
const relatedAnnouncements = ref([
  { id: 2, title: '农业技术培训补贴申请', time: '5天前' },
  { id: 3, title: '关于加强农产品质量安全管理的通知', time: '1周前' },
  { id: 4, title: '春季农资采购优惠活动', time: '2周前' }
])

onLoad((options) => {
  if (options.id) {
    announcementId.value = options.id
    // TODO: 根据ID加载公告详情
  }
})

// 获取类型名称
const getTypeName = (type) => {
  const typeMap = {
    policy: '政策通知',
    activity: '活动福利',
    system: '系统通知',
    important: '重要公告'
  }
  return typeMap[type] || '通知'
}

// 获取类型图标
const getTypeIcon = (type) => {
  const iconMap = {
    policy: 'bullhorn',
    activity: 'gift',
    system: 'bell',
    important: 'info-circle'
  }
  return iconMap[type] || 'bell'
}

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleShare = () => {
  uni.showToast({
    title: '分享功能开发中...',
    icon: 'none'
  })
}

const handleCollect = () => {
  uni.showToast({
    title: '收藏功能开发中...',
    icon: 'none'
  })
}

const handleViewRelated = (item) => {
  uni.redirectTo({
    url: `/pages/yjyny/announcement/detail?id=${item.id}`
  })
}
</script>

<style lang="scss" scoped>
.announcement-detail-page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #f9fafb);
}

// 顶部导航栏
.page-header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12rpx);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
}

.back-btn,
.share-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active,
.share-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 120rpx);
}

// 公告头部
.announcement-header {
  padding: 32rpx;
}

.header-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.title-section {
  display: flex;
  align-items: flex-start;
  gap: 32rpx;
  margin-bottom: 32rpx;
}

.icon-wrap {
  width: 128rpx;
  height: 128rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
  
  &.icon-policy {
    background: linear-gradient(to bottom right, #10b981, #059669);
  }
  
  &.icon-activity {
    background: linear-gradient(to bottom right, #f59e0b, #d97706);
  }
  
  &.icon-system {
    background: linear-gradient(to bottom right, #06b6d4, #0891b2);
  }
  
  &.icon-important {
    background: linear-gradient(to bottom right, #ef4444, #dc2626);
  }
}

.title-content {
  flex: 1;
  min-width: 0;
}

.announcement-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.type-badge {
  display: inline-block;
  padding: 10rpx 20rpx;
  border-radius: 12rpx;
  
  &.badge-policy {
    background-color: rgba(16, 185, 129, 0.1);
    
    .badge-text {
      color: #10b981;
    }
  }
  
  &.badge-activity {
    background-color: rgba(245, 158, 11, 0.1);
    
    .badge-text {
      color: #f59e0b;
    }
  }
  
  &.badge-system {
    background-color: rgba(6, 182, 212, 0.1);
    
    .badge-text {
      color: #06b6d4;
    }
  }
  
  &.badge-important {
    background-color: rgba(239, 68, 68, 0.1);
    
    .badge-text {
      color: #ef4444;
    }
  }
}

.badge-text {
  font-size: 22rpx;
}

.meta-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32rpx;
  border-top: 2rpx solid #f3f4f6;
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  color: #9ca3af;
}

.collect-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  background-color: #f3f4f6;
  border: none;
  border-radius: 16rpx;
  transition: background-color 0.3s;
}

.collect-btn:active {
  background-color: #e5e7eb;
}

.collect-text {
  font-size: 24rpx;
  color: #6b7280;
}

// 公告内容
.announcement-content {
  padding: 0 32rpx 32rpx;
}

.content-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
}

.content-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.title-bar {
  width: 8rpx;
  height: 40rpx;
  background-color: #10b981;
  border-radius: 4rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

.content-body {
  font-size: 28rpx;
  color: #6b7280;
  line-height: 1.8;
}

.content-text {
  word-break: break-all;
}

// 相关公告
.related-section {
  padding: 0 32rpx 32rpx;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.related-item {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  transition: all 0.3s;
}

.related-item:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.item-title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-time {
  font-size: 24rpx;
  color: #9ca3af;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
